import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, StyleSheet, Image, Button, ImageBackground } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import '../../common/global';
import Icon from 'react-native-vector-icons/AntDesign';
import { AsyncStorage } from 'react-native';

const data = [
    { image: require('../../Image/list1.png'), text: '运动' },
    { image: require('../../Image/list1_1.png'), text: '散步' },
    { image: require('../../Image/list1_2.png'), text: '午睡' },
    { image: require('../../Image/list1_3.png'), text: '看书' },
    { image: require('../../Image/list1_4.png'), text: '安眠' },
]

const List = ({ navigation, route }) => {
    // const color = ['rgb(230,232,255)', 'rgb(73,197,189)', 'rgb(191,123,162)', 'rgb(206,120,147)'];
    // const [listC, setListC] = useState('');
    // useEffect(() => {
    //     var index = Math.ceil(Math.random() * color.length - 1);
    //     setListC(color[index]);
    // }, [])
    let id = 101;
    if(route.params.id != undefined){
         id = route.params.id;
    }
    
    //获得存储的评论
    const getRecord = async () => {
        let data = await AsyncStorage.getItem('record');
        data = JSON.parse(data);
        if (data == null) {
            data = [
                { author: '林季子', content: '在一个孤岛上，有只小猫猫陪在你的身旁。', id: 2 },
                { author: 'weijoyer', content: '家里老旧的挂表，与取暖的火炉，下着小雨', id: 6 },
                { author: '温柔', content: '在丛林里坐在篝火旁听着虫鸣，风声进入梦乡。', id: 9 },
                { author: '林深见鹿', content: '超级放松的感觉！很轻松！', id: 10 },
            ];
            return data;
        } else {
            return data;
        }
    }

    let [data1, setData1] = useState([]);
    useEffect(() => {
        getRecord().then((res) => {
            let data = res;
            setData1([...data]);
        });
    },[id])

    return (
        <View style={styles.container}>
            <TouchableOpacity 
                style={{
                    display:'flex',
                    justifyContent:'center',
                    alignItems:'center',
                    paddingTop:20,
                    paddingBottom:20
                }}
                onPress={
                    () => {
                        navigation.navigate('home')
                    }
                }>
                <Icon name='up' size={50} style={{opacity:0.5,color:'rgb(184,186,204)'}}></Icon>
            </TouchableOpacity>

            <View style={styles.listStyle}>
                <View style={styles.show}>
                    <View style={styles.header1}>
                        <Text style={{ fontSize: 20 }}>选个合适的解压歌单吧</Text>
                        <Text style={{ fontSize: 20, position: 'absolute', left: '87%', color: 'rgb(127,130,243)' }} onPress={() => navigation.navigate('more',
                        )}>更多</Text>
                    </View>
                    <ScrollView horizontal={true} style={{ height: ptd(190) }}>
                        {
                            data.map((item, idx) => {
                                return (
                                    <View key={idx}>
                                        <View style={styles.imgStyle}>
                                            <ImageBackground source={item.image} style={styles.imageStyle}>
                                                <TouchableOpacity style={styles.but} onPress={() => navigation.navigate('play', { text: item.text })}></TouchableOpacity>
                                            </ImageBackground>
                                        </View>
                                        <View style={styles.wordStyle}><Text style={{ fontSize: 18 }}>{item.text}</Text></View>
                                    </View>
                                )
                            })
                        }
                    </ScrollView>
                </View>
                <View style={styles.show, { marginTop: ptd(20), marginBottom: ptd(20) }}>
                    <View style={styles.header1}>
                        <Text style={{ fontSize: 20 }}>听友说</Text>
                        <Text style={{ fontSize: 20, position: 'absolute', left: '87%', color: 'rgb(127,130,243)' }} onPress={() => navigation.navigate('moreshow')}>更多</Text>
                    </View>
                    <ScrollView horizontal={true} style={{ height: ptd(180) }}>
                        {
                            data1.map((item, idx) => {
                                return (
                                    <View key={idx} style={styles.itemStyle}>
                                        <TouchableOpacity style={styles.cotStyle}  >
                                            <Text style={{ fontSize: 19 }} numberOfLines={3}>{item.content}</Text>
                                        </TouchableOpacity>
                                        <View style={styles.autStyle}>
                                            <Text style={{ fontSize: 16, marginLeft: ptd(20) }}>By {item.author}</Text>
                                            <TouchableOpacity style={styles.play} onPress={() => navigation.navigate('play', {
                                                id: item.id
                                            })}><Icon name="caretright" size={28} style={{ color: 'rgba(0,0,0,0.6)' }}></Icon>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                )
                            })
                        }
                    </ScrollView>
                </View>
            </View>

        </View>

    )
}

const styles = StyleSheet.create({
    container: {
        height: h,
        
    },
    headerStyle: {
        flex: 1,
        height: ptd(30),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    headerShow: {
        width: '28%',
        height: '14%',
        backgroundColor: 'red',
        borderRadius: 50
    },
    listStyle: {
        flex: 1
    },
    header1: {
        height: ptd(50),
        marginLeft: ptd(10),
        flexDirection: 'row',
        alignItems: 'center'
    },
    headerStyle2: {
        flex: 1,
        height: ptd(30),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        marginTop: ptd(20),
    },
    imgStyle: {
        width: ptd(140),
        height: ptd(140),
        marginLeft: ptd(10),
        marginRight: ptd(10),
        overflow: 'hidden'
    },
    imageStyle: {
        width: '100%',
        height: '100%',
        borderRadius: 25,
    },
    but: {
        width: ptd(43),
        height: ptd(43),
        marginLeft: '65%',
        marginTop: '62%',
        borderRadius: 25,
    },
    wordStyle: {
        height: ptd(40),
        marginLeft: ptd(10),
        marginRight: ptd(10),
        flexDirection: 'row',
        alignItems: 'center',
    },
    itemStyle: {
        width: ptd(260),
        height: ptd(160),
        backgroundColor: 'rgb(230,232,255)',
        marginLeft: ptd(5),
        marginRight: ptd(5),
        borderRadius: 25,
    },
    cotStyle: {
        width: '100%',
        height: '68%',
        borderRadius: 25,
        paddingTop: ptd(35),
        paddingLeft: ptd(20),
        paddingRight: ptd(20)
    },
    autStyle: {
        width: '100%',
        height: '32%',
        borderRadius: 25,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    play: {
        width: ptd(43),
        height: ptd(43),
        backgroundColor: 'rgba(0,0,0,0.2)',
        marginLeft: '60%',
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center'
    }

})

export default List;